• Boites déroulantes au survol de la souris

    Boite texte
    Vous mettez bien entendu ce que vous souhaitez dans cette boite.
    Boite avec des images
    Comme des images par exemple.
    Ou alors des liens
    des liens comme le blog de papasti
    Ou encore des vidéos

    Ce tuto fait suite à celui que j'ai précédemment réalisé sur ce blog à la différence près qu'il ne fait pas appel au javascript. Dans celui-ci, le fonctionnement est identique sauf que la hauteur des boites déroulées est toujours la même. Le tuto sur le javascript permet de choisir une hauteur différente pour chaque boite.

    Internet explorer ne gérant pas les propriétés de transition, l'effet de scrolling visuel n'est pas rendu avec ce navigateur.

    Mise en place dans vos pages

    <div class="ma_boite">
    <div class="title_box">Boite texte</div>
    <div class="content_box" style="overflow: none;">Vous mettez bien entendu ce que vous souhaitez dans cette boite.</div>
    </div>

    J'ai structuré chaque boite avec une zone titre et une zone contenu afin de permettre une gestion plus facile du CSS

    Il vous suffit de placer ce code à l'aide du bouton html de l'éditeur.

    Si vous désirez une seconde boite, il vous suffit de recopier ce code une seconde fois. Exemple:

    <div class="ma_boite">
    <div class="title_box">Première boite</div>
    <div class="content_box" style="overflow: none;">Vous mettez bien entendu ce que vous souhaitez dans cette boite.</div>
    </div>
    <div class="ma_boite">
    <div class="title_box">Seconde boite</div>
    <div class="content_box" style="overflow: none;">Vous mettez bien entendu ce que vous souhaitez dans cette boite.</div>
    </div> 

    etc. Vous mettez autant de boites que vous souhaitez ^^

    Le code CSS

    Comme d'habitude, menu -> Apparence -> Modifier le thême -> Ajouter du code CSS et vous mettez le code suivant:

    .ma_boite
    {
    width:200px;
    height:18px;
    overflow:hidden;
    transition: height 1s; 
    -moz-transition: height 1s;
    -webkit-transition: height 1s;
    -o-transition: height 1s;  
    }

    .ma_boite:hover
    {
    height:150px;
    }
    .title_box
    {
    color:black;
    background-color:salmon;
    border: 1px solid black;
    border-radius: 5px;
    }
     

    Bien entendu, les valeurs en orange dans le code ci-dessus sont modifiables et vous pouvez ajouter d'autres propriétés CSS.

    Les variantes

    Comme vous l'avez vu dans les propriétés CSS, on joue ici sur la propriété height d'un élément. Il est tout à fait possible de jouer sur une autre transition comme la largeur ou les deux ainsi que sur la duée en secondes.

    Transition en hauteur et largeur
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    Code CSS correspondant à l'exemple ci-dessus:

    .ma_boite2
    {width:220px;height:20px;overflow:hidden;
     transition: height 5s; 
        -moz-transition: height 5s;
        -webkit-transition: height 5s;
        -o-transition: height 5s; 
    transition: width 3s; 
        -moz-transition: width 3s;
        -webkit-transition: width 3s;
        -o-transition: width 3s;  }
    .ma_boite2:hover
    {height:150px;width:500px;}